<template>
  <div class="w-full h-32 pl-10 pr-10">
    <!-- 基本使用 -->
    <CollapseContainer class="mt-5" title="基本使用" helpMessage="这是提示">
      <p>默认可折叠 </p>
      <p>默认宽度100%, 默认高度自适应</p>
      <p>单个提示时, 使用 helpMessage, 但使用数组表示多个提示时需要使用 :helpMessage </p>
    </CollapseContainer>

    <!-- 不可折叠 -->
    <CollapseContainer class="mt-5 w-200 h-50" title="不可折叠" :canExpan="false" :helpMessage="['提示1', '提示2']">
      <p>不可折叠, 设置 :canExpan="false" </p>
      <p>自定义宽度、高度，设置: class="w-200 h-50" </p>
      <p>多个提示项，设置 :helpMessage="['提示1', '提示2', '提示3']"</p>
    </CollapseContainer>

    <!-- 显示加载动画3秒 -->
    <CollapseContainer class="mt-5 w-200" title="显示加载动画3秒" :loading="showLoading">
      <p>自定义 title 采用插槽(#title)方式</p>
      <p>Title 中 自定义图标使用 Iconify 图标, 高度会自动可以对齐，使用 SvgIcon 无法调整高度 </p>
    </CollapseContainer>

    <!-- 自定义插槽: 标题区 -->
    <CollapseContainer class="mt-5 w-200">
      <p>自定义 title 采用插槽(#title)方式</p>
      <p>Title 中 自定义图标使用 Iconify 图标, 高度会自动可以对齐，使用 SvgIcon 无法调整高度 </p>
      <template #title> <Icon icon="majesticons-car" class="mr-1" /> Title 自定义图标 </template>
    </CollapseContainer>

    <!-- 自定义插槽: 按钮区 -->
    <CollapseContainer class="mt-5 w-200" title="自定义右侧按钮区">
      <p>自定义右侧按钮区 采用插槽(#action)方式</p>
      <p>自定义右侧按钮区后，会将原来的折叠按钮取消，</p>
      <template #action> <Icon icon="majesticons:car" /> <Icon icon="majesticons:airplane" class="mr-1" /></template>
    </CollapseContainer>

    <!-- 自定义插槽: 页脚区 -->
    <CollapseContainer class="mt-5 w-200" title="自定义页脚">
      <p>自定义右侧按钮区 采用插槽(#action)方式</p>
      <p>自定义右侧按钮区后，会将原来的折叠按钮取消，</p>
      <template #footer>
        <p class="text-right p-1 text-xs"> 这是底部</p>
      </template>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { MarkdownViewer } from '@/components/Markdown';
  import { ref } from 'vue';
  import { Icon } from '@/components/Icon';
  import { CollapseContainer } from '@/components/Container';

  const showLoading = ref(true);

  setTimeout(() => {
    showLoading.value = false;
  }, 3000);
</script>

<script lang="ts">
  function getDoc() {
    return `
    
## CollapseContainer
* 官网: * <a href="https://doc.vvbin.cn/components/collapse-container.html" target="_blank">vben CollapseContainer 官方文档</a>

### 常用属性

| 属性 | 类型 | 默认值 | 说明 | 示例 |
| :--- | :--- |  :--- |  :--- | :--- |
| title | string |  | 标题  | title="标题"  |
| helpMessage | string/string[] |  | 提示信息，会显示icon图标  | helpMessage="提示"  |
| canExpan | boolean | true | 是否可折叠  |   |
| loading | boolean | false | 是否显示loading动画  |   |
| lazyTime | number | 0 | 延迟加载时间,自测不生效  |   |


### 常用插槽

| 插槽名称 |  说明 |
| :--- | :--- | 
| #title | 标题区  | 
| #action | 右侧按钮区  | 
| #footer | 底部页脚区  | 

`;
  }

  function getSource() {
    return `


\`\`\`html
\<template\>
  <!-- 基本使用 -->
  <CollapseContainer class="mt-5" title="基本使用" helpMessage="这是提示">
    <p>默认可折叠 </p>
    <p>默认宽度100%, 默认高度自适应</p>
    <p>单个提示时, 使用 helpMessage, 但使用数组表示多个提示时需要使用 :helpMessage </p>
  </CollapseContainer>

  <!-- 不可折叠 -->
  <CollapseContainer class="mt-5 w-200 h-50" title="不可折叠" :canExpan="false" :helpMessage="['提示1', '提示2']">
    <p>不可折叠, 设置 :canExpan="false" </p>
    <p>自定义宽度、高度，设置: class="w-200 h-50" </p>
    <p>多个提示项，设置 :helpMessage="['提示1', '提示2', '提示3']"</p>
  </CollapseContainer>

  <!-- 显示加载动画3秒 -->
  <CollapseContainer class="mt-5 w-200" title="显示加载动画3秒" :loading="showLoading">
    <p>自定义 title 采用插槽(#title)方式</p>
    <p>Title 中 自定义图标使用 Iconify 图标, 高度会自动可以对齐，使用 SvgIcon 无法调整高度 </p>
  </CollapseContainer>

  <!-- Title 自定义图标 -->
  <CollapseContainer class="mt-5 w-200">
    <p>自定义 title 采用插槽(#title)方式</p>
    <p>Title 中 自定义图标使用 Iconify 图标, 高度会自动可以对齐，使用 SvgIcon 无法调整高度 </p>
    <template #title> <Icon icon="majesticons-car" class="mr-1" /> Title 自定义图标 </template>
  </CollapseContainer>

  <!-- 自定义按钮区 -->
  <CollapseContainer class="mt-5 w-200" title="自定义右侧按钮区">
    <p>自定义右侧按钮区 采用插槽(#action)方式</p>
    <p>自定义右侧按钮区后，会将原来的折叠按钮取消，</p>
    <template #action> <Icon icon="majesticons:car" /> <Icon icon="majesticons:airplane" class="mr-1" /></template>
  </CollapseContainer>

  <!-- 自定义页脚 -->
  <CollapseContainer class="mt-5 w-200" title="自定义页脚">
    <p>自定义右侧按钮区 采用插槽(#action)方式</p>
    <p>自定义右侧按钮区后，会将原来的折叠按钮取消，</p>
    <template #footer>
      <p class="text-right p-1 text-xs"> 这是底部</p>
    </template>
  </CollapseContainer>
\</template\>

\<script lang="ts" setup\>
import { ref } from 'vue';
  import { Icon } from '@/components/Icon';
  import { CollapseContainer } from '@/components/Container';

  const showLoading = ref(true);

  setTimeout(() => {
    showLoading.value = false;
  }, 3000);
\</script\>
\`\`\`      

  `;
  }
</script>
